<!-- 

1. Entry（入口）
作用：告诉 Webpack 从哪个模块开始构建依赖图。
Webpack 会从入口文件开始，递归地找出所有依赖的模块（如 JS、CSS、图片等），形成一个完整的依赖关系图。

module.exports = {
  entry: './src/index.js'
    或多入口
    entry: {
    app: './src/app.js',
    admin: './src/admin.js'
    }
};


2 Output（输出）

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js' // 输出文件名
    多入口时可使用 [name] 占位符
    filename: '[name].bundle.js'
  }
};

3. Loader（加载器）
让 Webpack 能够处理非 JavaScript 文件（如 .css、.scss、.png、.ts 等），将其转换为有效的模块。
Webpack 默认只理解 JavaScript 和 JSON，Loader 是处理其他类型文件的“翻译官”

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,           // 匹配 .css 文件
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.ts$/,            // 匹配 .ts 文件
        use: 'ts-loader'
      },
      {
        test: /\.(png|svg|jpg)$/, // 匹配图片
        type: 'asset/resource'    // Webpack 5 内置资源模块
      }
    ]
  }
};


4. Plugin（插件）
作用：执行更广泛的任务，如优化、压缩、环境变量注入、HTML 生成等。插件可以干预 Webpack 构建的整个生命周期。

使用方式：

js
深色版本
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

5. Mode（模式）
作用：设置 Webpack 的构建模式，启用对应环境的内置优化。
module.exports = {
  mode: 'development' // 或 'production' 或 'none'
};
-->